@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';

body {
	height: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
	font-weight: 700;
}

html {
	height: 100%;
	box-sizing: border-box;
}

#app {
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.no-padding {
	padding: 0px !important;
}

.padding-content {
	padding: 4px 0;
}

a:focus,
a:active {
	outline: none;
}

a,
a:focus,
a:hover {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

div:focus {
	outline: none;
}

.fr {
	float: right;
}

.fl {
	float: left;
}

.pr-5 {
	padding-right: 5px;
}

.pl-5 {
	padding-left: 5px;
}

.block {
	display: block;
}

.pointer {
	cursor: pointer;
}

.inlineBlock {
	display: block;
}

.clearfix {
	&:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: ' ';
		clear: both;
		height: 0;
	}
}

aside {
	background: #eef1f6;
	padding: 8px 24px;
	margin-bottom: 20px;
	border-radius: 2px;
	display: block;
	line-height: 32px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
		'Droid Sans', 'Helvetica Neue', sans-serif;
	color: #2c3e50;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	a {
		color: #337ab7;
		cursor: pointer;

		&:hover {
			color: rgb(32, 160, 255);
		}
	}
}

//main-container全局样式
.app-container {
	padding: 20px;
}

.components-container {
	margin: 30px 50px;
	position: relative;
}

.pagination-container {
	margin-top: 30px;
}

.text-center {
	text-align: center;
}

.sub-navbar {
	height: 50px;
	line-height: 50px;
	position: relative;
	width: 100%;
	text-align: right;
	padding-right: 20px;
	transition: 600ms ease position;
	background: linear-gradient(
		90deg,
		rgba(32, 182, 249, 1) 0%,
		rgba(32, 182, 249, 1) 0%,
		rgba(33, 120, 241, 1) 100%,
		rgba(33, 120, 241, 1) 100%
	);

	.subtitle {
		font-size: 20px;
		color: #fff;
	}

	&.draft {
		background: #d0d0d0;
	}

	&.deleted {
		background: #d0d0d0;
	}
}

.link-type,
.link-type:focus {
	color: #337ab7;
	cursor: pointer;

	&:hover {
		color: rgb(32, 160, 255);
	}
}

.filter-container {
	padding-bottom: 10px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}
}

//refine vue-multiselect plugin
.multiselect {
	line-height: 16px;
}

.multiselect--active {
	z-index: 1000 !important;
}

.filter-bar {
	margin-bottom: 32px;
	.filter-item {
		display: inline-block;
		white-space: nowrap;
        margin-bottom: 5px;
        margin-right: 15px;
        font-size: 14px;
		.el-select {
			width: 96px;
		}
	}
	.inline-block-fr {
		display: inline-block;
		float: right;
		text-align: right;
	}
}
.filter-item + .filter-item {
	/* margin-left: 20px; */
}

.handle-btns {
	white-space: nowrap;
}

.form {
	max-width: 1280px;
	min-width: 40%;
	margin: 20px auto;
	.form-btns {
        margin-top: 20px;
		display: flex;
		justify-content: center;
		.btn {
			padding: 0 10px;
		}
	}
}

.list-column-image {
	display: inline-block;
	width: 120px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	img {
		display: inline-block;
		width: 110px;
	}
}

.el-pagination {
    margin-top: 32px;
}

.custom-drawer {
    min-width: 700px;

    .layout-body-wrap {
        height: inherit;
        width: inherit;
        overflow: scroll;
        padding-bottom: 100px !important;
    }
}

.upload-box{
    width: 100%;
    height: auto;
    border: none;

    .el-image {
        width: 100%;
        height: 100%;
        display: inline-block;

        :hover {
            opacity: 0.7;
            transition: all 0.5s ease-in-out;
        }
    }
    .el-icon-plus {
        width: 100%;
        line-height: 135px;
    }
    .el-upload {
        float:left;
        border: none !important;
        width: 100% !important;
    }

    .photo-item {
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        /* width: 135px; */
        /* height: 135px; */
        margin: 5px;
        float: left;
        overflow: hidden;
        position: relative;
        cursor: move;

        .image-slot {
            text-align: center;
            width: 135px;
            height: 135px;
            line-height: 135px;
            background: rgba(0,0,0,0.3);

            i {
                font-size: 24px;
            }
        }

        .btn {
            position: absolute;
            cursor: pointer;
            color: #cccccc;
            font-size: 20px;
            top: 5%;
            display: none;
        }
        .btn-get-video-info {
            right: 65%;
        }
        .btn-link {
            right: 45%;
        }
        .btn-zoom-in {
            right: 25%;
        }
        .btn-delete {
            right: 5%;
        }
        .btn-loading {
            left: 0%;
            top: 10%;
            text-align: center;
            width: 100%;

            font-size: 30px !important;
            display: inline-block !important;
        }
        .loading-loaded-percent {
            left: 0%;
            top: 65%;
            text-align: center;
            width: 100%;
            position: absolute;
        }
    }

    .photo-item:hover {
        .btn {
            display: inline-block;
            background: rgba(0,0,0,0.5);
            border-radius: 5px;
        }
    }

    /* 拖拽时的样式 */
    .chosen {
        border: solid 1px #3089dc !important;
    }
}

.video-play-box {
    .el-dialog {
        width: 680px !important;
    }
}

.tinymce-container {
    margin-bottom: 25px;
}

.el-image-viewer__wrapper {
    .el-image-viewer__close {
        color: #ffffff;
    }
}
